<template>
  <view class="rx-editor" :class="readOnly?'rx-editor-readOnly':''">
    <view v-if="readOnly" v-html="curValue"></view>
    <piaoyi-editor v-else-if="showEditor()" ref="editor" :values="curValue"
                   :maxlength="metadata.control.type=='clob'?0:metadata.control.length"
                   @changes="saveContens"
                   :readOnly="readOnly"
                   :customImage="customImage"
    />
  </view>
    <RxEmpty v-if="readOnly && !curValue"></RxEmpty>
</template>
<script>
/*
    富文本控件
*/
import MForm from "../js/MForm";
import {FormApi} from "@/api/FormApi.js";
import RxEmpty from "@/components/RxEmpty"

export default {
  name: "MEditor",
  mixins: [MForm],
  components:{RxEmpty},
  data() {
    return {
      curValue: ""
    }
  },
  methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"componentsLang",key);
      },
    customImage(e){
      let file = e.tempFiles[0];
      let self = this;
      FormApi.upload({
        file: file.file || file
      }).then(res => {
        let result = res.data;
        if(!result.success || result.data.length==0){
          return;
        }
        let src = self.imageUrl(result.data[0].fileId);
        self.$refs.editor.editorCtx.insertImage({
          src: src,
          alt: this.i18n('image','图像'),
          success: function () {
          }
        })
      })
    },
    saveContens(e) {
      this.curValue = e.html;
    },
      showEditor(){
        if(!this.curValue && this.readOnly){
            return false
        }else {
            return true
        }
      }
  },
  watch: {
    curValue: function (val, oldVal) {
      this.updateValue(val);
      this.triggerEmitEvents('change', val, this.data)
    },
    value: {
      handler(v) {
        this.curValue = v;
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped>
.rx-editor-readOnly>>>.toolbar{
    display: none;
}
.rx-editor-readOnly>>>.wrapper{
    padding: 0px!important;
}
</style>
